<template>
	<div>
		<div class="player">
			<div class="player-mobile-video-wrap">
				<video
					class="player-mobile-video"
					ref="video"
					:src="item.content"
					:poster="item.img"
					webkit-playsinline
					playsinline
					preload="metadata"
					controls
				></video>
				<i class="iconfont icon-play2" @click="paly" v-if="isIcon"></i>
				<div class="player-mobile-load-layer" v-if="!isPlay">
					<img class="poster" :src="item.img">
					<i class="iconfont icon-play2" @click="paly"></i>
					<div class="player-mobile-video-tips">
						<div class="player-mobile-video-time">{{time}}</div>
						<div class="player-mobile-view-count">125.4万次观看</div>
						<div>{{item.commentlen}}弹幕</div>
						<div>{{item.date}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="m-video-info-new" v-if="item.category">
			<div class="title">
				<p>
					<span class="tag">
						{{item.category.title}}
					</span>
					{{item.name}}
				</p>
				<van-icon :name="isSHow ? 'arrow-up' : 'arrow-down'" @click="isSHow = !isSHow"/>
			</div>
			<div class="fold-box" v-if="isSHow">
				<div class="up">
					<div class="face">
						<img class="avatar" v-lazy="item.userinfo.user_img" alt="" v-if="item.userinfo.user_img">
						<img class="avatar" src="../../assets/images/default_img.jpg" v-else>
						<div class="info">
							<p class="name">{{item.userinfo.name}}</p>
							<p class="fans">376.6万粉丝</p>
						</div>
					</div>
					<div class="follow" @click="follow">
						<van-icon name="plus" />
						<span>{{isFollow ? '取消关注' : '关注'}}</span>
					</div>
				</div>
				<div class="data">
					<span class="view">276.9万观看</span> 
					<span class="danmaku">4.4万弹幕</span> 
					<span class="time">02-20</span> 
					<span class="bvid">BV1wi4y1T7jZ</span>
				</div>
				<p class="copyright">
					<van-icon name="fail" color="#fb7299" size="14"/>
					<span>未经作者授权禁止转载</span>
				</p>
				<p class="desc">
					本期是天文+历史+地理+时间概念<br>
					现在你们知道我的签名是什么意思了吧？<br>
					其实就是本周更新的2期视频的预告啦<br>
					欢迎大家讨论后续剧情！我不会删评，<br>
					也没做数据，连续榜一平台肯定检测过的，如果是假的早被封了<br>
					我接受大家的意见，希望能慢慢提高视频内容<br>
					然后本期最后我自己做的星相图是真的可以用的[打call]，<br>
					在初黄昏的时候观测北斗七星和北极星的相对位置可以判断季节,<br>
					什么时候不小心穿越时空了还可以用它记录年份<br>
					大家可以验证下还挺好玩的<br>
					赶紧三连投币关注起来，<br>
					什么时候不小心穿越了，就可以用到啦[doge]<br>
					下期剧情全新展开，投币过10万！真的秽土转生！<br>
				</p>
			</div>
			<div class="m-video2-toolbar">
				<div class="face" v-if="!isSHow">
					<img class="avatar" v-lazy="item.userinfo.user_img" alt="" v-if="item.userinfo.user_img">
					<img class="avatar" src="../../assets/images/default_img.jpg" alt="" v-else>
					<span>{{item.userinfo.name}}</span>
				</div>
				<div class="tools">
					<div class="tool-item">
						<van-icon name="good-job" size="20"/>
						<span>赞</span>
					</div>
					<div 
						class="tool-item" 
						@click="collection"
						:style="{'color': isCollection ? '#fb7299' : ''}"
					>
						<van-icon name="star" size="20"/>
						<span>收藏</span>
					</div>
					<div class="tool-item">
						<van-icon name="down" size="18"/>
						<span>缓存</span>
					</div>
				</div>
			</div>
		</div>
		
		<van-tabs 
			v-model="active"
			color="#fb7299"
			title-active-color="#fb7299"
			title-inactive-color="#505050"
			line-width="60"
			line-height="2"
			animated
			swipeable
		>
		  <van-tab title="相关推荐">
				<card v-if="commend.length">
					<card-item 
						v-for="(data,index) in commend"
						:key="index"
						:data="data" 
					/>
				</card>
				<van-empty description="没有推荐" v-else />
			</van-tab>
			
		  <van-tab :title="'评论'+ comment.length">
				<comment-title :userinfo="userinfo" />
				<comment :data="comment" v-if="comment.length" />
				<van-empty description="没有评论" v-else />
			</van-tab>
		</van-tabs>
		
	</div>
</template>

<script>
	import Card from '@/components/common/Card.vue'
	import CardItem from '@/components/common/CardItem.vue'
	import CommentTitle from './comment-title.vue'
	import Comment from '@/components/common/comment.vue'
	export default {
		data() {
			return {
				// 是否播放
				isPlay: false,
				// 是否暂停
				isIcon: false,
				time: '',
				isSHow: false,
				active: 0
			}
		},
		mounted() {
			const el = this.$refs.video
			el.addEventListener('play', () => {
				console.log('play')
				this.isIcon = false
			})
			el.addEventListener('pause', () => {
				console.log('pause')
				this.isIcon = true
			})
			el.addEventListener('loadedmetadata', () => {
				const time = (el.duration / 60).toFixed(2)
				this.time = time.split('.').join(':')
			})
		},
		methods: {
			// 视频播放
			paly() {
				this.isPlay = true
				this.isIcon = false
				this.$refs.video.play()
			},
			// 收藏
			collection() {
				this.$emit('collection')
			},
			// 关注用户
			follow() {
				this.$emit('follow')
			}
		},
		props: {
			// 接收详情数据
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			// 接收推荐文章数据
			commend: {
				type: Array,
				default() {
					return []
				}
			},
			// 用户信息
			userinfo: {
				type: Object,
				default() {
					return {}
				}
			},
			// 文章评论
			comment: {
				type: Array,
				default() {
					return []
				}
			},
			// 文章是否收藏
			isCollection: {
				type: Boolean,
				default: false
			},
			// 作者是否关注
			isFollow: {
				type: Boolean,
				default: false
			}
		},
		components: {
			Card,
			CardItem,
			CommentTitle,
			Comment
		}
	}
</script>

<style lang="scss" scoped>
	.player{
		width: 100%;
		height: 210px;
		background-color: #000;
		.player-mobile-video-wrap{
			position: relative;
			width: 100%;
			height: 100%;
			.player-mobile-video{
				width: 100%;
				height: 100%;
				display: block;
			}
			.iconfont {
				position: absolute;
				color: #fff;
				top: 45%;
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 99;
				font-size: 54px;
			}
			.player-mobile-load-layer{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				.poster{
					display: block;
					width: 100%;
					height: 100%;
				}
				.iconfont{
					position: absolute;
					top: 80px;
					left: 50%;
					transform: translateX(-50%);
					font-size: 54px;
					color: #fff;
				}
				.player-mobile-video-tips{
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 54px;
					background-image: linear-gradient(180deg,transparent 2%,rgba(0,0,0,.5) 98%);
					display: flex;
					color: #fff;
					font-size: 12px;
					padding-top: 25px;
					box-sizing: border-box;
					>div{
						height: 20px;
						line-height: 20px;
						margin-left: 12px;
					}
					.player-mobile-video-time{
						padding-left: 8px;
						padding-right: 8px;
						border-radius: 4px;
						background-color: rgba(0,0,0,.3);
					}
				}
			}
		}
	}
	.m-video-info-new{
		margin-top: 10px;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 12px;
			p{
				width: 325px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.tag{
					font-size: 12px;
					color: #fb7299;
					background-color: #f4f4f4;
					display: inline-block;
					box-sizing: border-box;
					padding: 2px 6px;
					border-radius: 12px;
					margin-right: 4px;
				}
			}
		}
		.fold-box{
			padding: 0 12px;
			.up{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.face{
					display: flex;
					align-items: center;
					margin-top: 15px;
					.avatar{
						width: 36px;
						height: 36px;
						border-radius: 50%;
						margin-right: 10px;
					}
					.info{
						.name{
							font-size: 14px;
							height: 17px;
							line-height: 17px;
						}
						.fans{
							font-size: 12px;
							color: #999;
							margin-top: 5px;
							height: 12px;
							line-height: 12px;
						}
					}
				}
				.follow{
					padding: 0 15px;
					height: 24px;
					line-height: 24px;
					border: 1px solid #fb7299;
					box-sizing: border-box;
					color: #fb7299;
					font-size: 12px;
					border-radius: 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					.van-icon{
						margin-right: 3px;
					}
				}
			}
			.data{
				color: #999;
				font-size: 12px;
				margin-top: 10px;
				>span{
					margin-right: 8px;
				}
			}
			.copyright{
				display: flex;
				align-items: center;
				margin-top: 10px;
				font-size: 12px;
				color: #999;
			}
			.desc{
				margin-top: 5px;
				font-size: 12px;
				color: #999;
				line-height: 18px;
				white-space: pre-wrap;
			}
		}
		.m-video2-toolbar{
			padding: 11px 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.face{
				font-size: 12px;
				display: flex;
				align-items: center;
				.avatar{
					width: 20px;
					height: 20px;
					border-radius: 50%;
					margin-right: 5px;
				}
			}
			.tools{
				display: flex;
				.tool-item{
					font-size: 12px;
					color: #999;
					display: flex;
					align-items: center;
					margin-left: 20px;
					&:first-child{
						margin-left: 0;
					}
					.van-icon{
						margin-right: 6px;
					}
				}
			}
		}
	}
</style>